<template>
	<view>
		<view style="padding: 10px">客户数：{{ totalCount || 0 }}</view>

		<uni-list>
			<uni-list-item v-for="(item, index) in customers" :key="index" clickable @click="gotoRelationship(item)">
				<!-- 自定义 header -->
				<template v-slot:header>
					<view style="flex: 1; display: flex; align-items: center">
						<image style="width: 40px; height: 40px; border-radius: 20px"
							:src="item.ciAvat? item.ciAvat: tempImageUrl" mode="widthFix">
						</image>
						<view style="margin-left: 8px; font-size: 13px">
							<view>{{ (item.ciName || '') + (item.ciAlia ? '(' + item.ciAlia + ')' : '') }}</view>
							<view>{{ (item.ciPhon || '') }}</view>
						</view>
					</view>
				</template>
				<!-- 自定义 body -->
				<template v-slot:body>
					<view class="slot-text">
						<view>
							{{ (item.browses.totalCount > 0 ? "浏览": "未浏览") + (item.totalCount > 0 ? "成交": "未成交") }}
						</view>
						<view>
							订单数: {{ item.totalCount || 0 }}
						</view>
					</view>
				</template>
				<!-- 自定义 footer-->
				<template v-slot:footer>
					<view style="display: flex; align-items: center;">
						<view style="margin-bottom: 3px;">{{item.ciFrom === '新客' ? '新客' : '老客'}}</view>
						<uni-icons type="forward" size="20" color="#C0C0C0"></uni-icons>
					</view>
				</template>
			</uni-list-item>
			<view v-if="isShow===true" style="text-align: center;color: #C0C0C0;">数据加载完毕！</view>
		</uni-list>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getAllCustomerInfo
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				customers: [],
				pageSize: 20,
				page: 1,
				totalCount: 0,
				osUuid: "",
				isloading: false,
				tempImageUrl: "http://jdc.jd.com/img/100x100/",
				isShow: false
			}
		},
		onLoad(params) {
			if (params.osUuid) {
				this.osUuid = params.osUuid
				this.loadCustomerInfo(this.osUuid)
			}
		},
		//监听页面上拉触底行为
		onReachBottom() {
			if (this.page * this.pageSize >= this.totalCount) {
				this.isShow = true
				return
			}
			if (this.isloading) return
			this.page += 1
			this.loadCustomerInfo(this.osUuid)
		},
		computed: {
			...mapGetters({
				activity: "activityInfo/activity",
			}),
		},
		methods: {
			async loadCustomerInfo(osUuid) {
				this.isloading = true
				let res = await getAllCustomerInfo({
					osUuid,
					first: this.pageSize,
					offset: (this.page - 1) * this.pageSize
				});
				if (res) {
					this.isloading = false
					this.customers = [...this.customers, ...res.nodes]
					this.totalCount = res.totalCount
				}
			},

			gotoRelationship(item) {
				uni.navigateTo({
					url: `/pages/boss/customer_browse?ciUuid=${item.ciUuid}`
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		height: 100%
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		margin-left: 30px;
	}
</style>
